/* pages/category/component/classify/classify.wxss */
.container {
  background-color: #F4F4F4;
  width: 100%;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.classify {
  height: 120rpx;
  display: flex;
  padding-left: 30rpx;
  align-items: center;
  color: #666666;
}

.classify-scoll {
  flex: 1;
  margin: 0;
  padding: 0;
}

.classifyMenu-item-active {
  background-color: #EFEFEF;
  color: #333333;
  font-weight: 800;
}

.classifyMenu-item-active::before {
  content: "";
  height: 10rpx;
  width: 10rpx;
  background-color: #0022EF;
  position: absolute;
  left: 0;
  border-radius: 0 15rpx 15rpx 0;
  animation: classifyActive 0.3s ease forwards;
}

@keyframes classifyActive {
  to {
    height: 100rpx;
  }
}

.cart {
  position: fixed;
  bottom: 60rpx;
  right: 40rpx;
  height: 100rpx;
  width: 100rpx;
  background-color: #FFFFFF;
  border-radius: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: width 0.3s ease;
  
}
.cartActive {
  width: 600rpx;
  border-radius: 60rpx;
  justify-content: space-between;
  padding: 5rpx 20rpx 5rpx 20rpx;
  transition: width 0.3s ease;
}
.price{
  opacity: 0;
  animation: priceActive 0.5s forwards;
}
@keyframes priceActive{
  to{
    opacity: 1;
  }
}
.classify-detail{
  background-color: #FFFFFF;
  border-radius: 8rpx;
  margin-top: 5rpx;
  padding: 20rpx;
}
.classify-detail-item{
  display: flex;
  margin-top: 10rpx;
}
.classify-detail-desc{
  margin-left: 10rpx;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start; //转换为不拉伸
  .name,.tag{
      display: flex;
  }
  .name{
    font-weight: 700;
  }
  .tag{
    border: 1rpx solid #F1D6B1;
    color: #C5924D;
    text-align: center;
    font-size: small;
    padding: 2rpx 5rpx;
    margin: 10rpx 1rpx;
  }
  .desc{
      color: #999999;
      font-size: 25rpx;
  }
  .price{
      width: 100%;
      display: flex;
      margin-top: 30rpx;
      justify-content: space-between;
      align-items: flex-start;
      .price-detail{
          color: #F95731;
          font-size: 40rpx;
          font-weight: 400;
          .price-2{
              display: flexbox;
              font-size: 25rpx;
              text-align:right;
          }
      }
      .plus{
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #0022AB;
          color: #ffffff;
          font-size: 40rpx;
          width: 60rpx;
          height: 60rpx;
          margin: 0;
          padding: 0;
          border-radius: 50%;
      }
  }
}

